<template>
  <slot name="insertFooter"></slot>
  <Button
    v-if="showCancel"
    :type="cancelType"
    :loading="cancelLoading"
    v-bind="cancelButtonProps"
    @click="handleCancel"
  >
    {{ cancelText }}
  </Button>
  <slot name="centerFooter"></slot>
  <Button
    v-if="showOk"
    :type="okType"
    :loading="okLoading"
    v-bind="okButtonProps"
    @click="handleOk"
  >
    {{ okText }}
  </Button>
  <slot name="appendFooter"></slot>
</template>
<script lang="ts" setup>
  // import { Button } from '@/components/Button';
  import { Button } from 'ant-design-vue';
  import { modalProps } from '../props';

  defineOptions({ name: 'AdVxeModalFooter' });

  defineProps(modalProps);
  const emit = defineEmits(['ok', 'cancel']);

  function handleOk(e: Event) {
    emit('ok', e);
  }

  function handleCancel(e: Event) {
    emit('cancel', e);
  }
</script>

<style lang="less">
  .vxe-modal--footer {
    padding: 10px 16px;
    border-top: 1px solid @border-color-base;
    background-color: var(--vxe-modal-header-background-color);

    button + button {
      margin-left: 10px;
    }
  }
</style>
